import { defineComponent, computed, unref } from 'vue';
import Chie from './fun';
interface BazProps {
  msg: string;
}
const Baz = defineComponent({
  name: 'Baz', // 组件名
  props: {
    msg: {
      type: String,
      default: 'xxxxx'
    }
  },
  // props参数  {slots:插槽,attrs:v-bind参数 emit:回调函数}
  setup(props: BazProps, { slots, attrs, emit }) {
    const getProps = computed(() => {
      const propsObj = { ...props };
      return propsObj;
    });

    const claseName = attrs.class ? attrs.class : 'defalt-class';

    const { msg } = unref(getProps);
    return () => (
      <div>
        <div>默认插槽: {slots.default && slots.default()}</div>
        <div>具名插槽: {slots.header && slots.header()}</div>
        <div>具名插槽: {slots.footer?.()}</div>
        <div>Attrs:{claseName}</div>
        <h2>Baz</h2>
        <div>{msg}</div>
        <el-button
          type="primary"
          onClick={() => {
            emit('update:msg', 'new msg');
          }}
        >
          修改1
        </el-button>
        <Chie></Chie>
      </div>
    );
  }
});
export default Baz;
